<template>
  <el-dialog
    class="depoly_box"
    title="将应用部署到服务器"
    :visible.sync="deployShow"
    width="830px"
    :before-close="handleClose"
  >
    <div class="depoly_content">
      <div class="app_box">
        <div class="title">选择要部署的应用</div>
        <el-checkbox-group
          class="app_list"
          v-model="checkListId"
          v-if="treeEdgeData && treeEdgeData.length !== 0"
        >
          <el-checkbox
            class="app_item"
            :label="item.text"
            v-for="item in treeEdgeData[0].children"
            :key="item.id"
          ></el-checkbox>
        </el-checkbox-group>
      </div>
      <div class="server_box">
        <div class="title">添加目标服务器</div>
        <el-form
          ref="formRef"
          :rules="rules"
          label-position="top"
          :inline="true"
          :model="form"
          class="demo-form-inline"
        >
          <el-form-item label="主机" prop="host">
            <el-input
              size="small"
              v-model="form.host"
              placeholder="请输入主机"
            ></el-input>
          </el-form-item>
          <el-form-item label-width="auto" label="HTTPS端口" prop="port">
            <el-input
              size="small"
              v-model="form.port"
              placeholder="请输入HTTPS端口"
            ></el-input>
          </el-form-item>
          <el-form-item label="用户名" prop="username">
            <el-input
              size="small"
              v-model="form.username"
              placeholder="请输入用户名"
            ></el-input>
          </el-form-item>
          <el-form-item label="密码" prop="password">
            <el-input
              show-password
              size="small"
              v-model="form.password"
              placeholder="请输入密码"
            ></el-input>
          </el-form-item>
          <el-form-item>
            <el-button
              @click="handAddTable('formRef')"
              icon="el-icon-plus"
              size="small"
              type="primary"
              >添加</el-button
            >
          </el-form-item>
        </el-form>
        <el-table
          ref="multipleTable"
          :data="tableData"
          tooltip-effect="dark"
          class="my_tab"
          height="298px"
          @selection-change="handleSelectionChange"
        >
          <el-table-column type="selection" width="55"> </el-table-column>
          <el-table-column label="主机" prop="host"> </el-table-column>
          <el-table-column prop="port" label="HTTPS端口"> </el-table-column>
          <el-table-column prop="username" label="用户名" show-overflow-tooltip>
          </el-table-column>
          <el-table-column prop="password" label="密码" show-overflow-tooltip>
          </el-table-column>
          <el-table-column label="操作" show-overflow-tooltip>
            <template slot-scope="scope">
              <i
                @click="handDel(scope.$index)"
                class="el-icon-delete"
                style="color: #ff4d4f"
              ></i>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
    <div v-if="alertList.length !== 0">
      <el-alert
        v-for="(item, index) in alertList"
        :key="index"
        :title="item"
        :type="isErrSucc"
        show-icon
      >
      </el-alert>
    </div>
    <span slot="footer" class="dialog-footer">
      <el-button @click="handleClose" size="small">取 消</el-button>
      <el-button
        :loading="btnLoading"
        type="primary"
        @click="onSubmit"
        size="small"
        >确 定</el-button
      >
    </span>
  </el-dialog>
</template>

<script>
import axios from "axios";
import { mapGetters } from "vuex";
import { generateId } from "@/utils/index";
import { deploy } from "@/api/siddhi.js";
import _ from "lodash";
export default {
  computed: {
    ...mapGetters(["treeEdgeData"]),
  },
  props: {
    deployShow: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      btnLoading: false,
      alertList: [],
      isErrSucc: "success",
      rules: {
        host: [
          {
            required: true,
            message: "请输入主机",
          },
        ],
        port: [
          {
            required: true,
            message: "请输入HTTPS端口",
          },
        ],
        username: [
          {
            required: true,
            message: "请输入用户名",
          },
        ],
        password: [
          {
            required: true,
            message: "请输入密码",
          },
        ],
      },
      checkListId: [],
      form: {
        //         host: "213"
        // password: "123"
        // port: "213"
        // username: "213"
        host: "",
        port: "",
        username: "",
        password: "",
      },
      serverList: [],
      siddhiFileList: [],
      tableData: [],
    };
  },
  methods: {
    handDel(index) {
      this.tableData.splice(index, 1);
    },
    handAddTable(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          // this.form.id = generateId();
          const form = _.cloneDeep(this.form);
          this.tableData.push(form);
          this.$refs[formName].resetFields();
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    onSubmit() {
      if (this.checkListId.length == 0 && this.serverList.length == 0) {
        this.$msg("选择要部署的Siddhi应用程序和服务器");
      } else if (this.checkListId.length == 0) {
        this.$msg("选择要部署的Siddhi应用程序");
      } else if (this.serverList.length == 0) {
        this.$msg("选择要部署的服务器");
      } else {
        let obj = {
          serverList: this.serverList,
          siddhiFileList: this.checkListId.map((item) => {
            return {
              fileName: item,
            };
          }),
        };
        // obj = JSON.stringify(obj);
        // console.log(obj, "obj");
        this.btnLoading = true;
        deploy(obj)
          .then((res) => {
            console.log(res.data, "部署");
            const { success, failure } = res.data;
            if (success.length !== 0) {
              this.isErrSucc = "success";
              this.alertList = success;
            }
            if (failure.length !== 0) {
              this.isErrSucc = "error";
              this.alertList = failure;
            }
          })
          .finally((f) => {
            this.btnLoading = false;
          });
      }
    },

    handleClose() {
      this.$refs["formRef"].resetFields();
      this.$emit("update:deployShow", false);
    },
    handleSelectionChange(val) {
      this.serverList = val;
    },
  },
};
</script>

<style lang='scss' scoped>
.depoly_box {
  /deep/ .el-dialog__body {
    padding-left: 0;
    padding-right: 0;
    padding-bottom: 0;
  }
  .my_tab {
    width: 100%;
    /* max-height: 307px; */
    /* overflow-y: auto; */
  }
  .depoly_content {
    display: flex;
    padding: 0 20px;
    margin-bottom: 10px;
    .server_box {
      /deep/ .el-form-item__label {
        width: auto;
      }
      /deep/ .el-form--label-top .el-form-item__label {
        padding: 0;
      }
      /deep/ .el-form {
        display: flex;

        .el-form-item {
          &:last-child {
            display: flex;
            align-items: flex-end;
          }
        }
      }
    }
    .app_box {
      width: 40%;
      margin-right: 30px;
      .app_list {
        background-color: #f5f5f5;
        padding: 10px;
        display: flex;
        flex-direction: column;

        height: 407px;
        overflow: auto;
        .app_item {
          margin-bottom: 15px;
          /deep/ .el-checkbox {
            color: #666;
            font-size: 14px;
          }
        }
      }
    }

    .title {
      color: #333333;
      font-size: 16px;
      font-weight: bold;
      margin-bottom: 18px;
    }
  }
  /deep/ .el-dialog__header {
    background-color: transparent !important;
  }
}
</style>